<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
    <style type="text/css" media="screen">@import "shaxi.css";</style>
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="jquery/jquery.customdata.js"></script>
    <script type="text/javascript" src="jquery/jquery.dataset.js"></script>
    <script type="text/javascript" src="jquery/jquery.i18n.js"></script>
    <script type="text/javascript" src="js/i18nApplication.js"></script>
    <script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="js/itinerary.js" type="application/x-javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var jQT;

        /**********************************************************
         **************************************FUNCTION INITIALIZER
         **/
        $(function() {
            /*
             *i18n Internazionalization: init dictionary based on language
             **/
            initI18nEngine('EN');

            /*init geocoding service*/
            geocoder = new google.maps.Geocoder();

            /*Init gmap*/
            var myLatlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 7,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            bounds = new google.maps.LatLngBounds();


            google.maps.event.addListener(map, 'tilesloaded', function() {
                /*close button*/
                alert('ciao');
                var closeDiv = $('<div></div>', {class:'abs_box'});
                var bt = $('<a></a>', {href:'#ride', class:'close_bt'}).append('close');
                $(closeDiv).append(bt);
                $('#map_canvas').append(closeDiv);

            });


            /*bind btn evt for coding address*/

            $("#ity input[name=ity_arr],[name=ity_dept]").bind("click", function(event) {
                processAddress(event);
                jQT.goTo('#addr_list_selector', '');
            });

            $("#ity input[name=ity_search]").bind("click", function(event) {
                searchRoute(event);
                jQT.goTo('#itys_list_selector', '');
            });


            /*JQT INIT********************/
            jQT = new $.jQTouch({
                addGlossToIcon: false,
                useAnimations: false
            });

            $('#map_canvas').bind('pageAnimationEnd', function() {
                document.getElementById("map_canvas").style.width = window.innerWidth;
                document.getElementById("map_canvas").style.height = window.innerHeight;
                google.maps.event.trigger(map, 'resize');
                fitsMarkersOnMap();


            });


            attachEventToNavBts();
        });


        function attachEventToNavBts() {

            var nl = $("div .toolbar li");

            for (i = 0; i < nl.length; i++) {
                var a = $(nl[i]).find("a");
                if ($(a).attr("href") == "#home") {
                    $(nl[i]).attr('class', 'act');
                }
                a.bind('click', function(event) {

                    var href = $(this).attr('href');
                    for (i = 0; i < nl.length; i++) {
                        var href1 = $(nl[i]).find("a").attr("href");
                        if (href !== href1) {
                            $(nl[i]).attr('class', '');
                        } else {
                            $(nl[i]).attr('class', 'act');
                        }
                    }
                });

            }
        }

    </script>


<body>

<div id="home" class="current">
    <div class="header"></div>
    <div class="toolbar">
        <ul>

            <li><a href="#ride"> <img src="img/bt_ride.png"></a></li>
            <li><a href="#home"><img src="img/bt_buzz.png"></a></li>
            <li><a href="#profile"><img src="img/bt_profile.png"></a></li>
            <li><a href="#map_canvas"><img src="img/bt_map.png"></a></li>

        </ul>
    </div>
    <div class="content"> welcome</div>
</div>


<!-- Itinerary -->
<div id="ride">
    <div class="header"></div>
    <div class="toolbar">
        <ul>
            <li><a href="#ride"> <img src="img/bt_ride.png"></a></li>
            <li><a href="#home"><img src="img/bt_buzz.png"></a></li>
            <li><a href="#profile"><img src="img/bt_profile.png"></a></li>
            <li><a href="#map_canvas"><img src="img/bt_map.png"></a></li>
        </ul>
    </div>
    <div class="content">
        <div id="ity">
            <div class="box_title"><h1>Set a new route </h1></div>
            <fieldset class="box">
                <input data-i18n="ity_dept_val" placeholder="Departure" name="ity_dept_val" type="text">
                <input class="bt_search" data-i18n="ity_dept" name="ity_dept" type="button" value="">
            </fieldset>
            <fieldset class="box">
                <input data-i18n="ity_arr_val" placeholder="Arrival" name="ity_arr_val" type="text">
                <input class="bt_search" data-i18n="ity_arr" name="ity_arr" type="button" value="">
            </fieldset>
            <fieldset class="box">
                <input data-i18n="ity_dist_range_val" placeholder="Dist range" name="ity_dist_range_val" type="text">
            </fieldset>
            <fieldset class="box">
                <input data-i18n="ity_date_val" placeholder="Date" name="ity_date_val" type="text">
            </fieldset>
            <fieldset class="box">
                <input data-i18n="ity_time_val" placeholder="Time" name="ity_time_val" type="text">
            </fieldset>
            <fieldset class="box">
                <input data-i18n="ity_time_range_val" placeholder="Time range" name="ity_time_range_val" type="text">
            </fieldset>
            <input class="bt_search" data-i18n="ity_search" name="ity_search" type="button" value="">
        </div>

    </div>
</div>
<div id="addr_list_selector">
    <div class="list_selector" id="dept_list_selector">addresses</div>
    <div class="list_selector" id="arr_list_selector">addresses</div>
</div>

<div class="list_selector" id="ity_list_selector"></div>

<div class="content" id="ity_content"></div>

<div class="content" id="utenti_content"></div>

<div id="map_canvas" style="position: relative; overflow: hidden;"><p>culo</p></div>

</body>
</html>